<template>
    <div id="app">
      <!-- <School ref="schoolRef"/> -->
      <!-- <MyStutend/> -->
      <!-- <HelloWorld names="张三" sex="男" :age="ages"/> -->
      <!-- <h1>111111111</h1> -->
      <!-- <h1 ref="newRef" class="box" style="color:red;">{{msg}}</h1>
      <h2 ref="newRefs">{{msg1}}</h2>
      <button @click="func1()">点击获取元素ref</button> -->
      <!-- <hr> -->
      <!-- <MyDay01 name="张三" :age="ages" :bol="trueFalse"/> -->
      <!-- <MyDay01/> -->
      <!-- <MyDay02/> -->
      <!-- ...................... -->
  
      <!-- 想使用click事件 必须使用native -->
      <!-- props $emit -->
      <!-- ref $emit -->
      <!-- <MyStutend @click.native="wq" /> -->
      <!-- <MyStutend ref="ljp" />
      {{ name }} -->
      <!-- -------自定义事件---------- -->
      <!-- native修饰符，当添加native时默认原生事件，否则是自定义事件 -->
      <!-- <MyDay03 @wq="sum" @click.native="func3" ref="demo"/>
      <h1>{{ dataName }}</h1> -->
      <!-- -------全局事件总线------------ -->
      <!-- <MyDay04/>
      <MyDay05/> -->
    </div>
  </template>
  
  <script>
  // import HelloWorld from './components/HelloWorld.vue'
  // import School from './components/SchoolS.vue'
  // import MyStutend from './components/stutend.vue'
  // import MyDay01 from './components/day01.vue'
  // import MyDay02 from './components/day02.vue'
  // import MyDay03 from './components/day03.vue'
  import MyDay04 from './components/day04.vue'
  import MyDay05 from './components/day05.vue'
  
  
  
  export default {
    name: 'App',
    data () {
      return{
        // name:'张三'
        // msg:"我是元素测试ref的使用11111111111",
        // msg1:"我是元素测试ref的使用222222222222",
        // ages:20,
        // ages:"",
        // trueFalse:"",
        // dataName:"",
      }
    },
    components: {
      // HelloWorld,
      // School,
      // MyStutend
      // MyDay01,
      // MyDay02,
      // MyDay03,
      MyDay04,
      MyDay05,
    },
    methods:{
      // 自定义第一种方式使用
      // sum(a,b){
      //   console.log(11111111111);
      //   console.log(a);
      //   console.log(b);
      // },
      // 自定义第二种方式使用
      // func2(a){
      //   console.log(22222222222);
      //   console.log(a);
      // },
      // 测试原生事件
      // func3(a){
        // console.log(33333333333);
        // console.log(a);
      // },
      // func4(a){
      //   console.log(55555555555);
      //   this.dataName = a;
      // }
      // ---------------
      // 测试 props 
      // wq(){
      //   // console.log(a)
      //   console.log(1);
      // }
      // ....................
      // 测试ref
      // fun(val){
      //   this.name = val
      // }
      // func1(){
      //   // 绑定元素时,获取Dom元素
      //   console.log(this.$refs);
      //   // console.log(this.$refs.newRef.style.color);
      //   // 绑定组件时，获取vc
      //   console.log(this.$refs.schoolRef.msg);
      // }
    },
    mounted() {
      // 自定义第二种方式使用，配置在methods
      // this.$refs.demo.$on("ljp",this.func2);
      // this.$refs.demo.$once("zth",this.func4)
      // 配置在生命周期中，需要使用箭头函数，箭头函数this指向指向自身的vc
      // this.$refs.demo.$on("zm",(a)=>{
      //   console.log(444444444444444);
      //   console.log(a);
      //   console.log(this);
      // })
      // console.log(this.$bus);
      // 要写箭头函数
      // this.$refs.ljp.$on('hjj',this.fun)
      // console.log(aaa);
      // console.log(this.$refs.hot);
      // 要写箭头函数
      // this.$bus.$on('hjj',this.fun)
    },
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
  